<template>
  <el-card
    class="m_t_b_10px xd-LearningHome-PoliticalNews-NewsDetail"
    shadow="hover"
  >
    <div slot="header">
      <div class="title">{{ typeName }}</div>
    </div>
    <div>
      <header class="header">
        <p class="text_size_18" style="font-weight: bold">题目：</p>
        <div class="m_t_15">
          <div v-html="detailData.questionContent"></div>
        </div>
        <!-- <div v-html="item.questionAnalysis"></div>    -->
        <div class="m_t_15" style="display: flex">
          <el-link
            @click="showExplain = true"
            :underline="false"
            style="font-size: 18px"
          >
            <div style="display: flex; align-items: center; color: #999999">
              <img
                src="@/assets/imgs/icon_jiexi.png"
                style="margin-right: 10px"
              />查看解析
            </div>
          </el-link>
          <el-link
            :underline="false"
            type="primary"
            @click="nextQuestion"
            style="margin-left: auto; font-size: 18px"
            >下一题</el-link
          >
        </div>

        <div
          v-show="showExplain"
          class="m_t_15"
          style="
            border-top: solid 1px #dddddd;
            border-bottom: solid 1px #dddddd;
          "
        >
          <div style="margin-top: 10px; font-weight: bold">结果分析：</div>
          <pre v-html="detailData.questionAnalysis"></pre>
        </div>
      </header>
    </div>
  </el-card>
</template>
<script>
export default {
  name: "NoticeDetail",
  data() {
    return {
      baseUrl: utils.baseURL,
      typeName: "",
      detailData: {},
      showExplain: false,
      typeList: [
        "智力测试",
        "人格测试",
        "兴趣测试",
        "焦虑与抑郁测试",
        "多元智能测试",
        "运动能力测试",
        "趣味测试",
      ],
    };
  },
  mounted() { 
    this.$store.commit('updateActiveMenu', '/Cinziqao/Test')
    var typeId = this.$route.query.typeId;
    this.typeName = this.typeList[typeId - 1];
    this.queryDetail(typeId, 0);
    utils.goTop();
  },
  methods: { 
    queryDetail(typeId, questionId) {
      var that = this;
      utils.post(
        "/psychic/psychicQuestionBank/get",
        { questionType: typeId, questionId: questionId },
        (res) => {
          if (res.success && res.data != null) {
            that.detailData = res.data;
          }else{
            this.$message.error('到底了，无更多试题') 
          }
        }
      );
    }, 
    nextQuestion() {
      var typeId = this.$route.query.typeId;
      var questionId = this.detailData.questionId;
      this.showExplain = false;
      this.queryDetail(typeId, questionId);
    },
  },
};
</script> 
